<template>
    <div class="other-cjwt plr15 pt15" >
        <van-collapse :value="activeNames" v-on:change="onChange">
            <van-collapse-item v-for="i in 5" :key="i" :name="i">
                <div slot="title" class="title">
                    <div class="sort">Q{{i+1}}</div>
                    <div class="content">代码是写出来给人看的，附带能在机器上运行</div>
                </div>
            </van-collapse-item>
        </van-collapse>
    </div>
</template>

<script>
export default {
    data(){
        return {
            activeNames: []
        }
    },
    onShow(){
        
    },
    mounted() {
        
    },
    methods: {
        onChange(e){
            this.activeNames = e.mp.detail
        }
    }
};
</script>
<style lang="scss" >
.other-cjwt{
    .title{
        display: -webkit-box;
        // -webkit-box-align: center;
        .sort{
            font-size: 10px;
            color: #fff;
            background-color: #0db592;
            width: 17px;
            height: 14px;
            text-align: center;
            line-height: 14px;
            position: relative;
            top: 5px;
            margin-right: 12px;

            &::after{
                content: "";
                width: 0;
                height: 0;
                position: absolute;
                border-style: solid;
                border-color: #0db592 #0db592 transparent transparent;
                border-width: 2px;
                transform: rotate(-90deg) translateX(-100%);
                bottom: 0;
                left: 0;
            }
        }
        .content{
            font-size: 15px;
        }
    }
}
</style>
